<template>
    <el-container>
        <el-main>
            <el-card shadow="hover" style="width: 450px; height: 380px; padding: 20px;">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                    <el-form-item>
                        <div class="logtext"> 总后台管理</div>
                    </el-form-item>
                    <el-form-item prop="username">
                        <el-input size="large" type="text" v-model="ruleForm.username" placeholder="用户账号"
                            :prefix-icon="User" />
                    </el-form-item>
                    <div style="padding: 3px;"></div>
                    <el-form-item prop="password">
                        <el-input size="large" v-model="ruleForm.password" type="password" placeholder="用户密码"
                            :prefix-icon="Lock" />
                    </el-form-item>
                    <div style="padding: 3px;"></div>
                    <el-form-item prop="code" style="position: relative;">
                        <el-input size="large" v-model="ruleForm.code" placeholder="验证码" :prefix-icon="Lock" />
                        <div style="position: absolute; top: 1px; right: 1px; bottom: 1px; ">
                            <el-image style="width: 100px; height: 38px;" slot="append" :src="imgHtml"
                                @click.stop="toggleCode" />
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-switch v-model="switchValue" active-text="记住密码" />
                    </el-form-item>

                    <el-form-item>
                        <el-button style="width: 100%;" size="large" type="primary" :loading="loading"
                            @click="submitForm(ruleFormRef)">确 定 登 录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { User, Lock } from '@element-plus/icons-vue'

const imgHtml = ref('')
const switchValue = ref(true)
const loading = ref(false)
const ruleFormRef = ref(null)
const router = useRouter()
const ruleForm = reactive({
    username: '',
    password: '',
    code: ''
})

const rules = ({
    username: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { min: 6, max: 16, message: '账号长度6-16', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 8, max: 16, message: '密码长度8-16', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '验证码不能为空', trigger: 'blur' },
        { min: 4, max: 4, message: '验证码错误', trigger: 'blur' },
    ]
})

onMounted(() => {
    toggleCode()
})

function toggleCode() {
    imgHtml.value = `/api/get_verify?${Math.ceil(Math.random() * 10)}`
}

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            loading.value = !loading.value
            request_post('admin_account_login', ruleForm).then(res => {
                if (res.data.code == 200) {
                    window.localStorage.setItem('admin_uid', res.data.data.uid)
                    window.localStorage.setItem('admin_token', res.data.data.token)
                    window.localStorage.setItem('admin_nickname', res.data.data.nickname)
                    window.localStorage.setItem('admin_username', res.data.data.username)
                    router.push('/')
                    success(res.data.msg)
                } else {
                    toggleCode()
                    error(res.data.msg)
                }
                loading.value = !loading.value

            })
        } else {
            console.log('error')
        }
    })
}



</script>
<style scoped>
.el-main {
    background-color: #409eff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logtext {
    width: 100%;
    font-size: 22px;
    font-weight: 800;
    color: #b4b4b4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
</style>